<template>
	<view class="content">
		<!-- <view class="" style="width: 750rpx;margin: 0 auto;">
			<u-tabs :list="list1" lineWidth="10"  @click="click"></u-tabs>
		</view> -->
		
		<view class="topCl">
			<view :class="shows == 0? 'xuanzhong' : 'noxuanzhong'" @click="shiyOk">
				可使用
			</view>
			
			<view  :class="shows == 1? 'xuanzhong' : 'noxuanzhong'" @click="yishiy">
				已使用
			</view>
			
			<view  :class="shows == 2? 'xuanzhong' : 'noxuanzhong'" @click="alls">
				全部
			</view>
			
		</view>
		
		<view class="bmain">
			<view class="yhq" v-for="(item,index) in yhqList" :key="index">
				<view class="yh_left">
					<view class="" style="padding: 20rpx;">
						{{item.coupon.title}}
					</view>
					<view class="" style="font-size: 50rpx;padding-left: 20rpx;">
						￥{{item.coupon.price}} x1
					</view>
					<view class="" style="padding: 20rpx;">
						订单满{{item.coupon.min_price}}可用
					</view>
					
				</view>
				<view class="yh_right">
					<view class="" style="">
						使用期限
					</view>
					<view class="" style="text-align: center;">
						2024-10-18
					</view>
					<view class="">
						2024-10-21
					</view>
					
					
					
					<view class=""  v-if="types == 1">
						<view @click="yesYhq(item)" class="" style="width: 100rpx;height: 50rpx;line-height: 50rpx;background-color: orange;margin: 20rpx auto;">
							使用
						</view>
					</view>
					
					
					<view v-else class="">
						未使用
					</view>
				</view>
				
			</view>
			
			
			
			
		</view>
		
		
		
		
	</view>
</template>

<script>
	export default {
			onLoad(option) {
				console.log(option)
				this.types = option.type
				this.orderMoney = option.money
			},
			onShow() {
				this.getCouponList()
			},
			data() {
				return {
	                list1: [{
	                    name: '可使用',
	                }, {
	                    name: '已使用',
	                }, {
	                    name: '全部'
	                }
					],
					shows:0,
					types:'',
					yhqList:[],
					orderMoney:'',
				}
			},
			methods: {
	            click(item) {
	                console.log('item', item);
	            },
				shiyOk(){
					this.shows = 0
					this.getCouponList()
				},
				yishiy(){
					this.shows = 1
					this.getCouponList()
				},
				alls(){
					this.shows = -1
					this.getCouponList()
				},
				getCouponList(){
					// getcoupon
					this.$req('GET',this.$api.getcoupon,{
						user_id:uni.getStorageSync('userId'),
						status:this.shows
					}).then(res =>{
						this.yhqList = res.data
						
						console.log(this.yhqList,'查看有没有优惠券')
						
					})
					
					
					
				},
				yesYhq(item){
					console.log(item,'查看item')
					if (Number(this.orderMoney) > Number(item.coupon.min_price)) {
					  uni.setStorageSync('youhuiquanId',item.coupon.id)
					  uni.$u.toast('选择成功');
					}else{
						uni.$u.toast('未满足条件');
					}
					
					console.log(Number(this.orderMoney))
					console.log(Number(item.coupon.min_price))
					
				}
				
				
				
			}
		}
</script>

<style>
	page {
		background: #f6f5f7;
	}
	
	
	.topCl{
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		text-align: center;
		align-items: center;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	
	.xuanzhong{
		width: 33.5%;
		height: 80rpx;
		background-color: #ccc;
		line-height: 80rpx;
		border-radius: 10rpx;
		color: #fff;
	}
	.noxuanzhong{
		width: 33.5%;
		height: 80rpx;
		background-color: #fff;
		line-height: 80rpx;
		border-radius: 10rpx;
	}
	
	.yhq{
		width: 90%;
		height: 250rpx;
		margin: 30rpx auto;
		display: flex;
		border: 3rpx solid #ccc;
		border-radius: 20rpx;
		background: linear-gradient(45deg,#fd4079,#fdbc40);
	}
	
	.yh_left{
		width: 70%;
		height: 250rpx;
		border-radius: 20rpx 0 0 20rpx;
		/* background-color: #0072ffa6; */
		color: #fff;
	}
	
	.yh_right{
		width: 30%;
		height: 250rpx;
		border-radius: 0 20rpx 20rpx 0;
		text-align: center;
		/* background-color: #0072ffa6; */
		color: #fff;
		
		
	}
	
	.yh_right view{
		margin-top: 15rpx;
	}
	
	
</style>